layui.use(['admin', 'form'], function () {
    let $ = layui.$
        , admin = layui.admin
        , setter = layui.setter
        , form = layui.form
        , request = setter.request;

    let layerIndex = '';
    let rules = [];
    layui.data.sendParams = function (params) {
        layerIndex = params.lay_index;
        if(params.rules){
            rules = params.rules;
        }
    }
    form.on('switch(statusSwitch)', function(data){
        let status = 0;
        if(data.elem.checked){
            status = 1;
        }
        $("#status").val(status);
    });

    // 新增
    form.on('submit(laySubmitAdd)', function(data){
        let field = data.field; //获取提交的字段
        field.rules = rules;
        // 提交 Ajax 成功后，关闭当前弹层并重载表格
        admin.req({
            url: setter.request.domainName + '/admin/auth.group/add' //实际使用请改成服务端真实接口
            , data: field
            , type: 'POST'
            , loading: true // 是否开启加载框
            , done: function(res){
                admin.message({
                    title: '提交成功'
                    ,offset: '15px'
                    ,icon: 1
                    ,time: 1500
                })
                layui.table.reload('groupTable'); //重载表格
                layer.close(layerIndex); //执行关闭
            }
        })
    });

    // 编辑
    form.on('submit(laySubmitEdit)', function(data){
        let field = data.field; //获取提交的字段
        field.rules = rules;
        // 提交 Ajax 成功后，关闭当前弹层并重载表格
        admin.req({
            url: setter.request.domainName + '/admin/auth.group/edit' //实际使用请改成服务端真实接口
            , data: field
            , type: 'POST'
            , loading: true // 是否开启加载框
            , done: function(res){
                admin.message({
                    title: '提交成功'
                    ,offset: '15px'
                    ,icon: 1
                    ,time: 1500
                })
                layui.table.reload('groupTable'); //重载表格
                layer.close(layerIndex); //执行关闭
            }
        })
    });

    // vueJS代码
    const App = {
        data() {
            return {
                props: {
                    value: 'id',
                    label: 'title',
                    children: 'children',
                } // 树形组件配置
                ,treeData:[] // 树形组件数据
                ,empty_text: "暂无数据"
            };
        },
        mounted() {
            let that = this;
            let checkedKeys = [];
            let expandedKeys= [];
            admin.axiosReq({
                url: setter.request.domainName + '/admin/auth.Menu/index' //实际使用请改成服务端真实接口
                , params: {action: "index"}
                , method: 'POST'
                , loading: true // 是否开启加载框
                , success: function(res) {
                    that.treeData = res.data.data.list;
                    if(rules.length > 0 && rules[0] === '*'){
                        // 超级管理员默认展开和选中所有节点
                        $.each(that.treeData, function(i, j){
                            expandedKeys.push(parseInt(j.id));
                            checkedKeys.push(parseInt(j.id));
                        })
                    }else if (rules.length === 0) {
                        // 默认展开主节点
                        $.each(that.treeData, function(i, j){
                            expandedKeys.push(parseInt(j.id));
                        })
                    }else if(rules.length > 0){
                        // 默认展开选中的节点
                        $.each(rules, function(i, j){
                            expandedKeys.push(parseInt(j));
                            checkedKeys.push(parseInt(j));
                        })
                    }
                    window.setTimeout(function (){
                        // 设置当前展开的节点
                        that.$refs.tree.setExpandedKeys(expandedKeys);
                        // 通过 keys 设置目前勾选的节点
                        that.$refs.tree.setCheckedKeys(checkedKeys);
                    }, 50 ); // 防止节点还未加载完成，导致设置效果失败
                }
            })
        },
        methods: {
            checkChange(data, node, e){
                let that = this;
                // 获取当前勾选节点的key
                rules = that.$refs.tree.getCheckedKeys(false);
                // 获取当前半选中节点的key
                let halfCheckedKey = that.$refs.tree.getHalfCheckedKeys(false);
                halfCheckedKey.filter(res => rules.push(res) );
            }
        }
    };

    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
    window.setTimeout(function (){

    }, 50 );
})
